<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打地鼠游戏</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="start-screen" id="startScreen">
        <div class="start-content">
            <h1>打地鼠游戏</h1>
            <div class="game-rules">
                <h2>游戏规则</h2>
                <ul>
                    <li>点击出现的地鼠获得分数</li>
                    <li>连续击中可获得连击加成</li>
                    <li>游戏时间为60秒</li>
                    <li>普通和困难模式下错过3只地鼠游戏结束</li>
                </ul>
            </div>
            <div class="difficulty-select">
                <h2>选择难度</h2>
                <button class="btn" data-difficulty="easy">简单</button>
                <button class="btn" data-difficulty="normal">普通</button>
                <button class="btn" data-difficulty="hard">困难</button>
            </div>
            <div class="achievements-list">
                <h2>成就列表</h2>
                <div class="achievement-cards" id="achievementCards"></div>
            </div>
        </div>
    </div>

    <script src="achievements.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const achievementCards = document.getElementById('achievementCards');
            const achievements = getAchievementsList();
            
            achievements.forEach(achievement => {
                const card = document.createElement('div');
                card.className = `achievement-card ${achievement.unlocked ? 'unlocked' : 'locked'}`;
                
                card.innerHTML = `
                    <div class="achievement-icon">${achievement.icon}</div>
                    <div class="achievement-info">
                        <div class="achievement-title">${achievement.title}</div>
                        <div class="achievement-description">${achievement.description}</div>
                    </div>
                `;
                
                achievementCards.appendChild(card);
            });
        });
    </script>
    <script src="script.js"></script>
</body>
</html>
